// 柱形图
var column2Column = document.querySelector(".column2_column .echart");
var column2ColumnMyChart = echarts.init(column2Column);
var item = {
  name: "",
  value: 1200, // 柱子颜色
  itemStyle: {
    color: "#254065",
  }, // 鼠标经过柱子颜色
  emphasis: {
    itemStyle: {
      color: "#4c9bfd",
    },
  }, // 工具提示隐藏
};
option2 = {
  xAxis: {
    type: "category",
    data: [
      "上海",
      "广州",
      "北京",
      "深圳",
      "合肥",
      "",
      "......",
      "",
      "杭州",
      "厦门",
      "济南",
      "成都",
      "重庆",
    ],
    axisTick: {
      alignWithLabel: false, // 不显示刻度
      show: false,
    },

    axisLabel: {
      fontSize: 8, // 设置X轴刻度文字大小
      color: "#4c9bfd",
    },
  },
  grid: {
    top: "5%", // 上边距
    bottom: "10%", // 下边距
    left: "10%", // 左边距
    right: "10%", // 右边距
  },
  yAxis: [
    {
      type: "value",
      interval: 500, // 设置刻度间隔
      max: 2500, // 设置Y轴的最大值
      min: 0, // 设置Y轴的最小值，默认是0
      axisLabel: {
        fontSize: 8, // 设置Y轴刻度文字大小
        color: "#4c9bfd",
      },
      axisLine: {
        show: true, // 显示 Y 轴线
        lineStyle: {
          color: "#4c9bfd", // Y 轴线颜色
        },
      },

      splitLine: {
        lineStyle: {
          color: "#4c9bfd", // 设置 Y 轴分割线颜色为蓝色
        },
      },
    },
    {
      type: "value",
      position: "right", // 右侧 Y 轴
      axisLine: {
        show: true, // 显示右侧 Y 轴线
        lineStyle: {
          color: "#4c9bfd", // 右侧 Y 轴线颜色
        },
      },
      splitLine: {
        show: false, // 关闭右侧 Y 轴的分割线
      },
      axisLabel: {
        formatter: function (value) {
          return value + " (右侧)"; // 格式化右侧 Y 轴的标签
        },
      },
    },
  ],

  series: [
    {
      data: [
        2000,
        1800,
        1700,
        1650,
        1400,
        item,
        item,
        item,
        900,
        800,
        700,
        500,
        250,
      ],
      type: "bar",
      itemStyle: {
        // 设置渐变色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#65f0fa" }, // 0% 处的颜色
            { offset: 1, color: "#1c5ce7" }, // 100% 处的颜色
          ],
        },
        barWidth: "20%", // 可选：设置柱子的宽度
      },
    },
  ],
};
option2 && column2ColumnMyChart.setOption(option2);
